<template>
  <div>
    <div class="qrcode-content">
      <div class="qrimg" id="qrcode"></div>
      <ul>
        <li>第一步：先微信关注‘{{whichCom}}’公众号；</li>
        <li>第二步：使用微信扫描左侧二维码，并授权，完成门店老板报表的绑定；</li>
        <li>第三步：进入‘{{whichCom}}’公众号，点击底部导航中的‘营业报表’，即可查看本店营业数据。</li>
      </ul>
    </div>
    <h1 class="wechat-title">已绑定老板报表的微信账号</h1>
    <el-table :data="wechatTable" size="mini">
      <el-table-column prop="headimgurl" align="center" label="微信头像">
        <template slot-scope="scope">
          <img class="avatar-img" :src="scope.row.headimgurl">
        </template>
      </el-table-column>
      <el-table-column prop="nickname" align="center" label="微信昵称"></el-table-column>
      <el-table-column prop="bindingTime" align="center" label="绑定时间" :formatter="tim"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click.native="handleUntied(scope.row.id)" type="text">解绑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page-unit :pageData="pageData" :func="_listShopWechatUsers"></page-unit>
  </div>
</template>

<script>
import { mapState } from "vuex";
import util from "@/util";
import QRCode from "qrcodejs2";
import pageUnit from "@/components/Page";
import {
  listShopWechatUsers,
  updateShopWechatUser,
  getUrl
} from "@/api";

export default {
  computed: {
    ...mapState(["sub", "merchantId", "power"])
  },
  components: {
    QRCode: QRCode,
    pageUnit
  },
  data () {
    return {
      wechatTable: [],
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      whichCom:""
    }
  },
   mounted () {
    this._getUrl()
    this._listShopWechatUsers(this.pageData.pageSize, 1)
  },
  methods: {
    // 获取二维码的url
    _getUrl() {
      let self = this
      getUrl({
        scope: 'snsapi_userinfo',
        shopId: this.merchantId
      }).then(res => {
        if(res.code == 200) {
          let resData = res.data
          if (res.data.isYlt==true) {
            this.whichCom="宝贝游吧"
          }else if (res.data.isYlt==false){
            this.whichCom="圣旦云服务"
          }
          self.$nextTick(res => {
            self.qrcode(resData.shopWechatUrl)
          })
        }
      })
    },

    // 转换时间戳
    tim(row) {
      return util.getdatetime(row.bindingTime);
    },

    // 获取门店微信用户列表
    _listShopWechatUsers(pageSize, pageNum) {
      listShopWechatUsers({
        shopId: this.merchantId,
        pageSize: pageSize,
        pageNum: pageNum
      }).then(res => {
        if(res.code == 200) {
          this.wechatTable = res.data.list
          this.pageData.totalItems = res.data.pageTotal
        }
      })
    },

    // 生成二维码
    qrcode (text) {
      let qrcode = new QRCode("qrcode", {
        width: 250,
        height: 250, // 高度  [图片上传失败...(image-9ad77b-1525851843730)]
        text: text // 二维码内容
      });
    },
    
    // 解绑
    handleUntied (id) {
      this.$confirm('解绑后该微信账号将不能查看本店的老板报表，确定要解绑吗？', {
        confirmButtonText: '解绑',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        showClose: false
      }).then(() => {
        updateShopWechatUser({id: id}).then(res => {
          if(res.code == 200) {
            this.$message.success(res.msg)
            location.reload()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解绑'
        });
      });
    }
  }
}
</script>
<style>
.el-message-box {
  width: 423px;
}
</style>
<style lang="less" scoped>
.qrcode-content {
  display: flex;
  .qrimg {
    margin: 20px;
    width: 250px;
    height: 250px;
  }
  ul {
    margin-top: 30px;
    margin-left: 20px;
    font-size: 14px;
    li {
      line-height: 28px;
    }
  }
}
.avatar-img {
  width: 40px;
  height: 40px;
}
.wechat-title {
  line-height: 50px;
  font-size: 16px;
}
</style>
